<template>
    <div class="single-select" v-show="show">
        <RadioGroup @on-change="changeChannel" class="h-radio-group" v-model="select">
            <Radio class="h-force-rect" v-for="c in channels" :key="c" :label="c">{{channel2GoodText(c)}} </Radio>
        </RadioGroup>
    </div>
</template>
<script>
/* eslint-disable */
export default {
  data() {
    return {
      select: ""
    };
  },
  props: {
    showIndex: {
      type: Number,
      default: 0
    },
    channels: {
      type: Array //String[]
    },
    raw_string: {
      type: String
    },
    channel2GoodText:{
      type:Function
    }
  },
  methods: {
    changeChannel(channel) {
      this.$emit("single-channel", channel);
    },
  },
  computed: {
    show() {
      return this.showIndex == 0;
    }
  },
  watch: {
    raw_string() {
      this.select = "";
    }
  }
};
</script>

<style lang="scss">
.single-select {
  .h-radio-group {
    margin-top: 5px;
    padding: 0 0px;
    label {
      display: block;
      padding: 2px 0;
    }
    .h-force-rect {
      span.ivu-radio {
        margin-right: 7px;
        &.ivu-radio-checked {
          span.ivu-radio-inner {
            border-color: #2d8cf0;
            background-color: #2d8cf0;
            &::after {
              content: "";
              display: table;
              width: 4px;
              height: 8px;
              position: absolute;
              top: 1px;
              left: 4px;
              border: 2px solid #fff;
              border-top: 0;
              border-left: 0;
              -webkit-transform: rotate(45deg) scale(1);
              transform: rotate(45deg) scale(1);
              -webkit-transition: all 0.2s ease-in-out;
              transition: all 0.2s ease-in-out;
            }
          }
        }
        span.ivu-radio-inner {
          border-radius: 2px;
          &::after {
            border-radius: 0;
            content: "";
            display: table;
            width: 4px;
            height: 8px;
            position: absolute;
            top: 1px;
            left: 4px;
            border: 2px solid #fff;
            border-top: 0;
            border-left: 0;
            -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
            -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
          }
        }
      }
    }
  }
}
</style>
